<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
    <div class="row">
        <div class="col-md-12">

            <form class="form-horizontal">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title" id="title"></h3>
                        <ul class="panel-controls">
                            <li><a href="/admin/option/manageQuestionForm.jspa"><i class="fa fa-arrow-left"></i></a></li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <p>在这里新增或者修改一个报修表单。</p>
                    </div>

                    <input type="hidden" id="formId" value="${questionForm.id}">

                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-9">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">表单名称</label>

                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                            <input type="text" class="form-control" id="name"
                                                   value="${questionForm.name}"/>
                                        </div>
                                        <div id="nameValid"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <c:choose>
                            <c:when test="${empty groups or group.length==0}">
                                <div id="groupAndQuestions" class="panel-body col-md-9">
                                    <table id="table-0" class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>组名称</th>
                                            <th colspan="2"><input id="group-0" type="text" class="form-control"
                                                                   value="">
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="question">
                                            <td>问题<span>1</span>标题</td>
                                            <td colspan="2"><input id="question-0-0" type="text" class="form-control"
                                                                   value=""></td>
                                        </tr>
                                        <tr style="display: none">
                                            <td>问题<span>1</span>选项</td>
                                            <td>
                                                <div id="question-choice-0-0" class="form-group">
                                                    <div class="col-md-2">
                                                        <input id="choice-0-0-0" type="text" placeholder=""
                                                               class="form-control">
                                                    </div>
                                                    <div class="col-md-2">
                                                        <input id="choice-0-0-1" type="text" placeholder=""
                                                               class="form-control">
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-info btn-rounded btn-sm"
                                                        title="添加选项"
                                                        onclick="addChoice('question-choice-0-0','0-0');">添加选项
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3">
                                                <button type="button" class="btn btn-info btn-rounded btn-sm"
                                                        title="添加问题"
                                                        onclick="addQuestion(0,this)">添加问题
                                                </button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </c:when>
                            <c:otherwise>
                                <c:forEach items="${groups}" var="group" varStatus="state">
                                    <div id="groupAndQuestions" class="panel-body col-md-9">
                                        <table id="table-${state.index}" class="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th>组名称</th>
                                                <th colspan="2"><input id="group-${state.index}" type="text" class="form-control"
                                                                       value="${group.questionGroup.name}">
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <c:forEach items="${group.questions}" var="question" varStatus="qState">
                                            <tr class="question">
                                                <td>问题<span>${qState.index+1}</span>标题</td>
                                                <td colspan="2"><input id="question-${state.index}-${qState.index}" type="text" class="form-control"
                                                                       value="${question.title}"></td>
                                            </tr>
                                            <tr style="display: none">
                                                <td>问题<span>${qState.index+1}</span>选项</td>
                                                <td>
                                                    <div id="question-choice-${state.index}-${qState.index}" class="form-group">
                                                        <c:if test="${not empty question.option1}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-0" type="text" placeholder=""
                                                                   class="form-control" value="${question.option1}">
                                                        </div>
                                                        </c:if>
                                                        <c:if test="${not empty question.option2}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-1" type="text" placeholder=""
                                                                   class="form-control" value="${question.option2}">
                                                        </div>
                                                        </c:if>
                                                        <c:if test="${not empty question.option3}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-2" type="text" placeholder=""
                                                                   class="form-control" value="${question.option3}">
                                                        </div>
                                                        </c:if>
                                                        <c:if test="${not empty question.option4}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-3" type="text" placeholder=""
                                                                   class="form-control" value="${question.option4}">
                                                        </div>
                                                        </c:if>
                                                        <c:if test="${not empty question.option5}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-4" type="text" placeholder=""
                                                                   class="form-control" value="${question.option5}">
                                                        </div>
                                                        </c:if>
                                                        <c:if test="${not empty question.option6}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-5" type="text" placeholder=""
                                                                   class="form-control" value="${question.option6}">
                                                        </div>
                                                        </c:if>
                                                    </div>
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-info btn-rounded btn-sm"
                                                            title="添加选项"
                                                            onclick="addChoice('question-choice-${state.index}-${qState.index}','${state.index}-${qState.index}');">添加选项
                                                    </button>
                                                </td>
                                            </tr>
                                            </c:forEach>
                                            <tr>
                                                <td colspan="3">
                                                    <button type="button" class="btn btn-info btn-rounded btn-sm"
                                                            title="添加问题"
                                                            onclick="addQuestion(${state.index},this)">添加问题
                                                    </button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </c:forEach>
                            </c:otherwise>
                        </c:choose>
                        <div class="panel-footer">
                            <span class="btn btn-info btn-rounded btn-sm" onclick="addGroup(this)">添加一组</span>
                        </div>
                        <div class="panel-footer">
                            <span class="btn btn-primary pull-right" onclick="submita()">保存</span>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>

</div>
<!-- END PAGE CONTENT WRAPPER -->
<script>
    /**
     * 组：table :id组成=table-index
     * 组名称：table input :id组成=group-tableIndex
     * 问题：table .question input :id组成=question-groupIndex-index
     * 问题选项：table #question-choice-tableIndex-questionIndex  input:id组成=choice-tableIndex-questionIndex-index
     * */
    function addGroup(but) {
        var tableSize = $("#groupAndQuestions table").length;
        var childHtml = '' +
                '<table id="table-' + tableSize + '" class="table table-bordered">' +
                '       <thead>' +
                '           <tr>' +
                '               <th>组名称</th>' +
                '               <th colspan="2"><input id="group-' + tableSize + '" type="text" class="form-control" value=""></th>' +
                '            </tr>' +
                '       </thead>' +
                '       <tbody>' +
                '           <tr class="question">' +
                '               <td>问题<span>1</span>标题</td>' +
                '               <td colspan="2"><input id="question-' + tableSize + '-0" type="text" class="form-control" value=""></td>' +
                '           </tr>' +
                '           <tr style="display: none">' +
                '               <td>问题<span>1</span>选项</td>' +
                '               <td>' +
                '                   <div id="question-choice-' + tableSize + '-0" class="form-group">' +
                '                       <div class="col-md-2">' +
                '                           <input id="choice-' + tableSize + '-0-0" type="text" placeholder="" class="form-control">' +
                '                       </div>' +
                '                       <div class="col-md-2">' +
                '                           <input id="choice-' + tableSize + '-0-1" type="text" placeholder="" class="form-control">' +
                '                       </div>' +
                '                   </div>' +
                '               </td>' +
                '               <td>' +
                '                   <button type="button" class="btn btn-info btn-rounded btn-sm" title="添加选项" onclick="addChoice(\'question-choice-' + tableSize + '-0 \',\'0-0\');">添加选项' +
                '                   </button>' +
                '               </td>' +
                '           </tr>' +
                '           <tr>' +
                '               <td colspan="3"><button type="button" class="btn btn-info btn-rounded btn-sm" title="添加问题" onclick="addQuestion(' + tableSize + ',this)">添加问题' +
                '                   </button></td>' +
                '           </tr>' +
                '       </tbody>' +
                '</table>';

        $("#groupAndQuestions").append(childHtml);
    }
    function addQuestion(qIndex, but) {
        var trSize = $(but).parents("table").find(".question").length;
        var childHtml = '' +
                '<tr class="question">' +
                '   <td>问题<span>' + (trSize + 1) + '</span>标题</td>' +
                '   <td colspan="2"><input id="question-' + qIndex + '-' + trSize + '" type="text" class="form-control" value=""></td>' +
                '</tr>' +
                '<tr style="display: none">' +
                '                   <td>问题<span>' + (trSize + 1) + '</span>选项</td>' +
                '                   <td>' +
                '                       <div id="question-choice-' + qIndex + '-' + trSize + '" class="form-group">' +
                '                           <div class="col-md-2">' +
                '                               <input id="choice-' + qIndex + '-' + trSize + '-0" type="text" placeholder="" class="form-control">' +
                '                           </div>' +
                '                           <div class="col-md-2">' +
                '                               <input id="choice-' + qIndex + '-' + trSize + '-1" type="text" placeholder="" class="form-control">' +
                '                           </div>' +
                '                       </div>' +
                '                   </td>' +
                '                   <td>' +
                '                       <button type="button" class="btn btn-info btn-rounded btn-sm" title="添加选项" onclick="addChoice(\'question-choice-' + qIndex + '-' + trSize + '\',\'' + qIndex + '-' + trSize + '\');">添加选项' +
                '                       </button>' +
                '                   </td>' +
                '               </tr>';
        $(but).parent().parent().before(childHtml);

    }
    function addChoice(td, qIndex) {
        var inputSize = $("#" + td + " input").size();
        if (inputSize >= 6) {
            alert("只能添加六个")
            return;
        }
        var childHtml = '<div class="col-md-2">' +
                '<input id="choice-' + qIndex + '-' + inputSize + '" type="text" placeholder="" class="form-control">' +
                '</div>';
        $("#" + td).append(childHtml);
        return;
    }

    function getDatas() {
        var paramArray = []
        $.each($("table"), function (data, value) {
            console.log(data + "===" + value)
            var group = {};
            group.name = $(value).find("th input").val();
            var questions = [];
            $.each($(value).find(".question"), function (qIndex, qv) {
                var question = {};
                question.title = $(qv).find("input").val();
                var choices = [];
                $.each($(qv).next().find("input"), function (cIndex, cv) {
                    choices.push( $(cv).val() );
                });
                question.choice = choices;
                questions.push(question);
            });
            group.question = questions;
            paramArray.push(group);
        });
        console.log(JSON.stringify(paramArray));
        return paramArray;
    }

    var formId;
    function submita() {
        var param = {};
        param.id = formId == '' ? -1 : formId;
        param.name = $('#name').val();
        if (!param.name || param.name == '') {
            var vhtml = '<label id="re-password-error" class="error" for="re-password">请输入表单名！</label>';
            $('#nameValid').html(vhtml);
            return false;
        }
        if (getDatas().length == 0) {
            alert("请添加问题");
            return false;
        }
        param.groups = getDatas();
        json("/admin/option/saveQuestionForm.jspa", {param: JSON.stringify(param)}, function (data) {
            window.location.href = document.referrer;
        });
    }
    function submitb() {
        setTimeout(function () {
            submita();
        }, 100);
    }

    $(function () {
        formId = $('#formId').val();
        $('#title').html(formId == '' ? '添加表单' : '修改表单');
    });
</script>
